﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5新增文档结构标签的综合应用</title>
        <link rel="stylesheet" href="css/html5.css">
    </head>
    <body>
        <header>
            <h1>页眉Header</h1>
        </header>
        <div id="container">
            <nav>
                <a href="http://www.example.com">菜单一</a>
                <a href="http://www.example.com">菜单二</a>
                <a href="http://www.example.com">菜单三</a>
                <a href="http://www.example.com">菜单四</a>
                <a href="http://www.example.com">菜单五</a>
                <a href="http://www.example.com">菜单六</a>
                <a href="http://www.example.com">菜单七</a>
                <a href="http://www.example.com">菜单八</a>
            </nav>
            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <section>
                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>

                <article>
                    <header>
                        <h1>文章页眉Article Header</h1>
                    </header>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <p>正文内容</p>
                    <footer>
                        <h2>文章页脚Article Footer</h2>
                    </footer>
                </article>
            </section>
            <aside>
                <h3>侧栏Aside</h3>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
                <p>侧栏内容</p>
            </aside>
            <footer>
                <h2>页脚Footer</h2>
            </footer>
        </div>
    </body>
</html>